<template>
	<el-main>
		<el-card shadow="never">
      <el-alert title="注意：本功能仅在本地使用，点击生成后会在本地项目生成文件，请勿将其部署到线上。后端会直接生成代码文件。前端仅生成代码文本，请复制到前端项目。" type="error" />
      <br>
			<el-form ref="ruleForm" :model="form" :rules="rules" label-width="100px">
        <el-row >
          <el-col :span="12">
            <el-form-item label="架构类型" prop="type">
              <el-select style="width:100%" v-model="form.type" @change="typeChange">
                <el-option value="MVC" label="MVC架构"></el-option>
                <el-option value="COLA" label="COLA架构"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="form.type === 'COLA'" label="领域名称" prop="domainName">
              <el-input v-model="form.domainName" placeholder="小写开头 例:user"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
				<el-row >
					<el-col :span="12">
						<el-form-item label="实体名" prop="name">
							<el-input v-model="form.name" placeholder="例:User"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="描述" prop="description">
							<el-input v-model="form.description" placeholder="例:用户信息"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row >
					<el-col :span="12">
						<el-form-item label="作者" prop="author">
							<el-input v-model="form.author" placeholder="例:hhqkkr"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="表名前缀" prop="tablePrefix">
							<el-input v-model="form.tablePrefix"  placeholder="例:sys_"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row >
					<el-col :span="12">
						<el-form-item label="表名简称" prop="tableAlias">
							<el-input v-model="form.tableAlias" placeholder="例:us"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="服务名" prop="serviceName">
							<el-input v-model="form.serviceName" placeholder="例:system"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row >
					<el-col :span="24">
						<el-form-item label="表格字段明细" prop="fieldList">
              <el-tabs
                  v-model="fieldTab"
                  type="card"
                  style="width: 100%"
                  @tab-change="tabClick"
              >
                <el-tab-pane label="后端" name="backend">
                  <sc-form-table v-model="form.fieldList" :addTemplate="addTemplate"  placeholder="暂无数据">
                    <el-table-column prop="fieldName" width="250" label="字段名" >
                      <template #default="scope">
                        <el-input v-model="scope.row.fieldName" placeholder="请输入字段名"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="description" width="200" label="字段描述" >
                      <template #default="scope">
                        <el-input v-model="scope.row.description" placeholder="请输入字段描述"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="type" width="200" label="字段类型" >
                      <template #default="scope">
                        <el-select v-model="scope.row.type" placeholder="请选择字段类型">
                          <el-option v-for="item in typeDic" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                      </template>
                    </el-table-column>
                    <el-table-column prop="defaultVal" width="250" label="默认值(也可以填CommonConstant.*)">
                      <template #default="scope">
                        <el-input v-model="scope.row.defaultVal" placeholder="请输入默认值"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="cindex" width="200" label="是否为索引" >
                      <template #default="scope">
                        <el-switch v-model="scope.row.cindex" active-text="是" inactive-text="否" :active-value="1" :inactive-value="0"/>
                      </template>
                    </el-table-column>
                    <el-table-column prop="notNull" width="200" label="是否不能为空" >
                      <template #default="scope">
                        <el-switch v-model="scope.row.notNull" active-text="是" inactive-text="否" :active-value="1" :inactive-value="0"/>
                      </template>
                    </el-table-column>
                  </sc-form-table>
                </el-tab-pane>
                <el-tab-pane label="前端" name="frontend">
                  <sc-form-table v-model="form.frontFieldList" :addTemplate="addFrontTemplate"  placeholder="暂无数据">
                    <el-table-column prop="fieldName" width="250" label="字段名" >
                      <template #default="scope">
                        <el-input v-model="scope.row.fieldName" placeholder="请输入字段名"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="description" width="200" label="字段描述" >
                      <template #default="scope">
                        <el-input v-model="scope.row.description" placeholder="请输入字段描述"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="type" width="200" label="字段类型" >
                      <template #default="scope">
                        <el-select v-model="scope.row.type" placeholder="请选择字段类型">
                          <el-option v-for="item in frontTypeDic" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                      </template>
                    </el-table-column>
                    <el-table-column prop="colWidth" width="100" label="表格列宽度">
                      <template #default="scope">
                        <el-input v-model="scope.row.colWidth" placeholder="例：200"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="dictType" width="180" label="字典类型">
                      <template #default="scope">
                        <el-input :disabled="scope.row.type !== 'dict'" v-model="scope.row.dictType" placeholder="例：resourceType"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="api" width="280" label="api地址">
                      <template #default="scope">
                        <el-input :disabled="scope.row.type !== 'api'" v-model="scope.row.api" placeholder="例：system.tenant.getSelectItem"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="searchable" width="150" label="是否为搜索条件" >
                      <template #default="scope">
                        <el-switch v-model="scope.row.searchable" active-text="是" inactive-text="否" :active-value="1" :inactive-value="0"/>
                      </template>
                    </el-table-column>
                    <el-table-column prop="searchType" width="200" label="查询条件类型" >
                      <template #default="scope">
                        <el-select :disabled="scope.row.searchable !== 1" v-model="scope.row.searchType" placeholder="请选择查询条件类型">
                          <el-option v-for="item in searchTypeDic" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                      </template>
                    </el-table-column>
                  </sc-form-table>
                </el-tab-pane>
              </el-tabs>
						</el-form-item>
					</el-col>
				</el-row>
				<el-form-item>
					<el-button type="primary" @click="save">保存配置</el-button>
					<el-button type="primary" @click="saveAndGen">{{saveAndGenDescription}}</el-button>
				</el-form-item>
			</el-form>
		</el-card>
    <el-dialog align-center title="前端代码" v-model="frontCodeVisible" :width="1200" destroy-on-close >
      <el-tabs
          v-model="frontCodeVisibleTab"
          type="card"
          style="width: 100%;"
          @tab-change="tabClick"
      >
        <el-tab-pane label="index.vue" name="codeIndex">
          <pre class="code-pre">{{frontCodeForm.codeIndex}}</pre>
        </el-tab-pane>
        <el-tab-pane label="save.vue" name="codeSave">
          <pre class="code-pre">{{frontCodeForm.codeSave}}</pre>
        </el-tab-pane>
        <el-tab-pane label="api.vue" name="codeApi">
          <pre class="code-pre">{{frontCodeForm.codeApi}}</pre>
        </el-tab-pane>
      </el-tabs>
      <template #footer>
        <el-button @click="frontCodeVisible=false" >取 消</el-button>
      </template>
    </el-dialog>
	</el-main>
</template>

<script>
	export default {
		name: 'back-code-gen',
		data(){
			return {
        fieldTab:"backend",
        frontCodeVisibleTab:"codeIndex",
        saveAndGenDescription:"生成后端代码",
        frontCodeVisible:false,
        frontCodeForm:{
          codeIndex:"",
          codeSave:"",
          codeApi:""
        },
				addTemplate: {
					fieldName: '',
					description: '',
					type: '',
					defaultVal:null,
          cindex:0,
          notNull:0
				},
        addFrontTemplate:{
          fieldName: '',
          description: '',
          type: '',
          colWidth:100,
          dictType:'',
          api:"",
          searchable:0,
          searchType:""
        },
				form: {
					id:"",
          type:"",
					name:"",
          domainName:"",
					description:"",
					author:"",
					tablePrefix:"",
					tableAlias:"",
					serviceName:"",
					fieldList: [

					],
          frontFieldList: [

          ]
				},
				typeDic: [
					{
						label: "String",
						value: "String"
					},
					{
						label: "Integer",
						value: "Integer"
					},
					{
						label: "Date(无分时秒)",
						value: "Date"
					},
					{
						label: "DateTime",
						value: "DateTime"
					},
					{
						label: "BigDecimal",
						value: "BigDecimal"
					},
					{
						label: "Long",
						value: "Long"
					},
					{
						label: "Double",
						value: "Double"
					},
					{
						label: "Float",
						value: "Float"
					},
				],
        frontTypeDic:[
          {
            label: "文本",
            value: "text"
          },
          {
            label: "数字",
            value: "number"
          },
          {
            label: "普通选择框",
            value: "select"
          },
          {
            label: "日期",
            value: "date"
          },
          {
            label: "字典选择框",
            value: "dict"
          },
          {
            label: "api选择框",
            value: "api"
          },
        ],
        searchTypeDic:[
          {
            label: "文本",
            value: "text"
          },
          {
            label: "数字",
            value: "number"
          },
          {
            label: "普通选择框",
            value: "select"
          },
          {
            label: "日期",
            value: "date"
          },
          {
            label: "日期范围",
            value: "daterange"
          },
          {
            label: "字典选择框",
            value: "dict"
          },
          {
            label: "api选择框",
            value: "api"
          },
        ],
				rules: {
          type: [
            {required: true, message: '请选择类型', trigger: 'blur'},
          ],
					name: [
						{required: true, message: '请输入类名', trigger: 'blur'},
					],
					description: [
						{required: true, message: '请输入描述', trigger: 'blur'},
					],
					author: [
						{required: true, message: '请输入作者', trigger: 'blur'},
					],
					tablePrefix: [
						{required: true, message: '请输入表格前缀', trigger: 'blur'},
					],
					tableAlias: [
						{required: true, message: '请输入表格简称', trigger: 'blur'},
					],
					serviceName: [
						{required: true, message: '请输入服务名称', trigger: 'blur'},
					]
				}
			}
		},
		mounted(){
			this.getConfigData();
		},
		methods: {
      tabClick(name){
        console.log(name)
        if(name === "backend"){
          this.saveAndGenDescription = "生成后端代码";
        }else{
          this.saveAndGenDescription = "生成前端代码";
        }
      },
      typeChange(){
        this.form.domainName = null;
      },
			async getConfigData(){
				var res;
				res = await this.$API.generator.genConfig.getConfig.get(this.form);
        if(res.data)this.form  = res.data;
			},
			 save(){
				this.$refs.ruleForm.validate(async (valid) => {
          if(this.form.type === 'cola' && !this.form.domainName){
            this.$message.error("请输入领域名称");
            valid = false;
          }
					if (valid) {
						this.isSaving = true;
            var res = await this.$API.generator.genConfig.save.post(this.form);
						if(res.success){
							this.$message.success("操作成功")
						}
						this.isSaving = false;
					}else{
						return false;
					}
				})
			},
			saveAndGen(){
        if(this.fieldTab === 'backend')this.genBackEnd();
        else if(this.fieldTab === 'frontend')this.genFrontEnd();
			},
      genBackEnd(){
        this.$refs.ruleForm.validate(async (valid) => {
          if(this.form.type === 'cola' && !this.form.domainName){
            this.$message.error("请输入领域名称");
            valid = false;
          }
          if (valid) {
            this.isSaving = true;
            var res = await this.$API.generator.genConfig.saveAndGen.post(this.form);
            if(res.success){
              this.$message.success("操作成功")
            }
            this.isSaving = false;
          }else{
            return false;
          }
        })
      },
      genFrontEnd(){
        this.$refs.ruleForm.validate(async (valid) => {
          if (valid) {
            this.isSaving = true;
            var res = await this.$API.generator.genConfig.saveAndGenFront.post(this.form);
            if(res.success){
                this.frontCodeVisible = true;
                this.frontCodeForm = res.data;
            }
            this.isSaving = false;
          }
        })
      },
			resetForm(){
				this.$refs.ruleForm.resetFields();
			}
		}
	}
</script>
<style>
  .code-pre{
    font-size: 12px;
    color: #999;
    padding:10px;
    background: #333;
    font-family: consolas;
    line-height: 1.5;
    overflow: auto;
    height: 600px
  }
</style>